<template>
	<view>
		<view class="nav-bar">
			<NavBar background="transparent">
				<view slot="left">
					<image src="/static/mine-title.png" class="mine-title"></image>
				</view>
			</NavBar>
		</view>
		<image src="/static/mine-bg.png" class="mine-bg" mode="widthFix"></image>

		<view v-if="userInfo.userId" class="user-view">
			<view class="user-content">
				<view class="user-name">{{userInfo.nickName}}</view>
				<view class="user-tag">
					<view v-if="userInfo.authFlag == '30'" class="tag-item">
						<image src="/static/enterprise-icon.png" class="tag-icon"></image>
						<view>企业实名</view>
					</view>
					<view v-if="userInfo.authFlag == '20'" class="tag-item">
						<image src="/static/personage-icon.png" class="tag-icon"></image>
						<view>个人实名</view>
					</view>
					<view class="division"></view>
					<view class="tag-item">
						<image src="/static/vip-icon.png" class="tag-icon"></image>
						<view>{{userInfo.memberLevel.name}}</view>
					</view>
				</view>
			</view>
			<view class="user-head-portrait" @click="onChooseImage">
				<image :src="`${IMG_URL}${userInfo.avatarImg}`" class="head-portrait" mode="aspectFill"></image>
				<image src="/static/edit-icon.png" class="head-portrait-iocn"></image>
			</view>
		</view>

		<view class="statistics-view">
			<navigator url="/pagesMine/transaction/transaction" class="statistics-item">
				<view class="statistics-number">{{userAssets.projectNum || 0}}</view>
				<view>我的项目</view>
			</navigator>
			<view class="division"></view>
			<navigator url="/pagesMine/bankingList/bankingList" hover-class="none" class="statistics-item">
				<view class="statistics-number">{{userAssets.bankNum || 0}}</view>
				<view>银行卡</view>
			</navigator>
			<view class="division"></view>
			<navigator url="/pages/mineIntegral/mineIntegral" hover-class="none" class="statistics-item">
				<view class="statistics-number">{{userAssets.points || 0}}</view>
				<view>积分</view>
			</navigator>
		</view>


		<view class="card-view">
			<view class="card-title">
				<view>我的资产</view>
				<view class="title-options">
					<view>单位：万元</view>
					<image src="/static/mine-look.png" class="options-icon"></image>
				</view>
			</view>

			<view class="property-view-total">
				<view class="property-label">
					<image src="/static/property-icon.png" class="label-icon"></image>
					<view>出资总额</view>
				</view>
				<view class="property-view">
					<view class="property-label">
						<view class="label-value">{{userAssets.subscriptionAmount || 0}}</view>
					</view>
					<view class="property-value">
						<view class="value-text">约定回报 :</view>
						<view class="value-num">{{userAssets.subscriptionPredictAmount || 0}}</view>
					</view>
				</view>
			</view>
			<view class="property-view">
				<view class="property-label">
					<image src="/static/cell-time.png" class="label-icon"></image>
					<view>预约总额 :</view>
					<view class="label-value">{{userAssets.preAmount || 0}}</view>
				</view>
				<view class="property-value">
					<view class="value-text">预约总额:</view>
					<view class="value-num">{{userAssets.prePredictAmount || 0}}</view>
				</view>
			</view>
			<view class="property-view">
				<view class="property-label">
					<image src="/static/cell-scucc.png" class="label-icon"></image>
					<view>购买总额 :</view>
					<view class="label-value">{{userAssets.buyAmount || 0}}</view>
				</view>
				<view class="property-value">
					<view class="value-text">预约总额:</view>
					<view class="value-num">{{userAssets.buyPredictAmount || 0}}</view>
				</view>
			</view>
		</view>

		<view class="card-view">
			<view class="card-title">我的功能</view>

			<view class="icon-view">
				<navigator url="/pages/mingMaterial/mingMaterial" hover-class="none" class="icon-item">
					<image src="/static/mine-icon-1.png" class="icon-image"></image>
					<view>我的资料</view>
				</navigator>
				<navigator :url="`/pages/authentication/authentication?authFlag=${userInfo.authFlag}`"
					hover-class="none" class="icon-item">
					<image src="/static/mine-icon-2.png" class="icon-image"></image>
					<view>实名认证</view>
				</navigator>
				<navigator v-if="userInfo.riskAssessment == '10'"
					:url="`/pagesMine/riskAssessment/riskAssessment?authFlag=${userInfo.authFlag}`" hover-class="none"
					class="icon-item">
					<image src="/static/mine-icon-3.png" class="icon-image"></image>
					<view>风险评估</view>
				</navigator>
				<navigator v-else url="/pagesMine/riskAssessmentResult/riskAssessmentResult"
					hover-class="none" class="icon-item">
					<image src="/static/mine-icon-3.png" class="icon-image"></image>
					<view>风险评估</view>
				</navigator>
				<navigator url="/pages/wanxiaobao/wanxiaobao" hover-class="none" class="icon-item">
					<image src="/static/mine-icon-4.png" class="icon-image"></image>
					<view>万小宝</view>
				</navigator>
				<!-- :offset="offset" -->
				<navigator url="/pages/messageList/messageList" hover-class="none" class="icon-item">
					<uni-badge :text="messageCount" type="primary" absolute="rightTop"
						:customStyle="{background: '#FF5717'}">
						<image src="/static/mine-icon-5.png" class="icon-image"></image>
					</uni-badge>
					<view>消息通知</view>
				</navigator>

				<navigator url="/pagesMine/addressList/addressList" hover-class="none" class="icon-item">
					<image src="/static/mine-icon-6.png" class="icon-image"></image>
					<view>我的地址</view>
				</navigator>
				<navigator url="/pages/agreement/agreement?status=3" hover-class="none" class="icon-item">
					<image src="/static/mine-icon-7.png" class="icon-image"></image>
					<view>关于我们</view>
				</navigator>
				<navigator url="/pages/systemSetting/systemSetting" hover-class="none" class="icon-item">
					<image src="/static/mine-icon-8.png" class="icon-image"></image>
					<view>账号设置</view>
				</navigator>
			</view>
		</view>

		<view class="mine-desc">
			<view class="desc-text">国鑫诺众发展集团有限公司</view>
			<view class="desc-text">版权所有</view>
			<view class="desc-text">京ICP备2022021672号</view>
		</view>

		<view style="height: 160upx;"></view>
	</view>
</template>

<script>
	import PcMine from './components/PcMine.vue';
	export default {
		components: {
			PcMine
		},
		data() {
			return {
				messageCount: 0,
				userAssets: {
					subscriptionAmount: '', //认购总额 万元
					preAmount: '', // 预约总额 万元
					buyAmount: '', // 购买总额 万元
					subscriptionPredictAmount: '', // 认购预期收益总额
					prePredictAmount: '', // 预约预期收益总额
					buyPredictAmount: '', // 购买预期收益总额
					projectNum: '', // 项目数量
					bankNum: '', // 银行卡数
					points: '', // 积分余额（总=项目积分+常规积分）
					projectPoints: '', // 项目积分
					routinePoints: '', // 常规积分
				},
				userInfo: {
					authFlag: '10', // 认证类型 10未认证 20个人 30企业
					riskAssessment: '10', // 是否分险评估 10未评估  20已评估
				}
			}
		},
		onLoad() {},
		onShow() {
			this.getUserInfo()
		},
		methods: {
			async getUserAssets() {
				const res = await uni.$api.getUserAssets()
				this.userAssets = res.data
			},
			async getUserInfo() {
				const res = await uni.$api.getUserInfo()
				this.userInfo = res.data
				this.getUserAssets()
				this.getMessageCount()
			},
			async onChooseImage() {
				const image = await uni.$util.chooseImage(1)
				if (!image.length) return
				uni.$util.showLoading('上传中...')
				const res = await uni.$api.uploadFile(image[0]).finally(uni.finally)
				uni.$util.showLoading('修改中...')
				await uni.$api.updateUserInfo({
					avatarImg: res.data.fileObjectName
				}).finally(uni.finally)
				this.userInfo.avatarImg = res.data.fileObjectName
			},
			async getMessageCount() {
				const res = await uni.$api.getMessageCount()
				this.messageCount = res.data
			},
		}
	}
</script>

<style scoped lang="scss">
	.nav-bar {
		position: relative;
		z-index: 1;
	}

	.mine-bg {
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
	}

	.mine-title {
		width: 74upx;
		height: 36upx;
	}

	.user-view {
		width: 100%;
		padding-left: 65upx;
		padding-right: 54upx;
		padding-top: 54upx;
		@extend .row-between;
		align-items: flex-start;
		position: relative;
		z-index: 1;

		.user-content {
			width: calc(100% - 150upx);

			.user-name {
				width: 100%;
				font-size: 43rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				color: #FFFFFF;
				@extend .text-dot;
			}

			.user-tag {
				@extend .row-start;

				.division {
					width: 1px;
					height: 31rpx;
					margin: 0 14upx;
					background: white;
				}

				.tag-item {
					@extend .row;
					font-size: 22rpx;
					font-weight: 600;
					color: #FFFFFF;

					.tag-icon {
						width: 27upx;
						height: 27upx;
						margin-right: 9upx;
					}
				}
			}

			.user-tag+.user-tag {
				margin-top: 5upx;
			}
		}

		.user-head-portrait {
			width: 116rpx;
			height: 116rpx;
			position: relative;

			.head-portrait {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}

			.head-portrait-iocn {
				width: 43upx;
				height: 43upx;
				position: absolute;
				right: 0;
				bottom: 0;
			}
		}
	}

	.statistics-view {
		width: 100%;
		padding: 0 90upx;
		margin-top: 20upx;
		position: relative;
		z-index: 1;
		@extend .row-between;

		.division {
			width: 2px;
			height: 36rpx;
			background: rgba($color: #FFFFFF, $alpha: 0.4)
		}

		.statistics-item {
			@extend .column;
			font-size: 24rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;

			.statistics-number {
				height: 60rpx;
				font-size: 43rpx;
				font-weight: 600;
				color: #FFFFFF;
			}
		}
	}

	.card-view {
		width: 707rpx;
		padding: 22upx;
		background: #FFFFFF;
		border-radius: 14rpx;
		margin: 0 auto;
		margin-top: 22upx;
		position: relative;
		z-index: 1;

		.card-title {
			width: 100%;
			padding: 0 9upx;
			padding-bottom: 20upx;
			border-bottom: 1px solid #F3D7D7;
			font-size: 29rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			color: #2C1101;
			@extend .row-between;

			.title-options {
				@extend .row;
				font-size: 22rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #69442E;

				.options-icon {
					width: 33upx;
					height: 33upx;
					margin-left: 18upx;
				}
			}
		}
	}

	.property-view {
		width: 100%;
		padding: 30upx 0;
		@extend .row-between;

		&:last-child {
			padding-bottom: 5upx;
		}

		.label-view {
			@extend .row;
		}

		.property-label {
			flex: 1;
			@extend .row-start;
			font-size: 25rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #69442E;

			.label-icon {
				width: 25upx;
				height: 25upx;
				margin-right: 13upx;
			}

			.label-value {
				font-size: 33rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				color: #2C1101;
				margin-left: 9upx;
			}
		}

		.label-column {
			@extend .column;
			align-items: flex-start;

			.label-value {
				font-size: 43rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				color: #FF2615;
				margin-left: 38upx;
				margin-top: 7upx;
			}
		}

		.property-value {
			@extend .row;

			.value-text {
				font-size: 25rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #69442E;
			}

			.value-num {
				font-size: 33rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				color: #FF2615;
				margin-left: 16upx;
			}
		}
	}

	.property-view-total {
		@extend .property-view;
		@extend .column;
		align-items: flex-start;

		.property-view {
			padding: 0upx 0;
		}

		.property-label {
			font-size: 28rpx;
			color: #FF2615;
		}

		.property-label {
			.label-value {
				margin-left: 38upx;
				font-weight: 600;
				font-size: 24px;
				color: #FF2615;
				text-align: left;
			}
		}
	}

	.property-view+.property-view {
		// border-top: 1px dotted #F3D7D7;
		background-image: linear-gradient(to right, #F3D7D7 50%, transparent 0);
		background-size: 15upx 1px;
		background-repeat: repeat-x;
	}


	.icon-view {
		width: calc(100% + 44upx);
		margin-left: -55upx;
		@extend .row-start;
		flex-wrap: wrap;

		.icon-item {
			width: calc(100% / 4 - 71upx);
			margin-left: 71upx;
			margin-top: 40upx;
			font-size: 25rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #2C1101;
			@extend .column;

			.icon-image {
				width: 58upx;
				height: 58upx;
				margin-bottom: 14upx;
			}
		}

	}


	.mine-desc {
		width: 100%;
		margin-top: 47upx;
		@extend .column;

		.desc-text {
			font-size: 20rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #B8ACA3;
		}
	}
</style>